/**
1. 在view 中创建视图组件
2. router 中配置路由导航
3. 使用 element 布局
4. 使用 api 请求函数
5. 调用请求函数，按倒结果，渲染到页面中
*/
<template>
<el-table
  stripe
  :data="rights"
  style="width: 100%">
  <!-- 序号 -->
  <el-table-column type="index"></el-table-column>
  <el-table-column
    prop="authName"
    label="权限名称"
    width="180">
  </el-table-column>
  <el-table-column
    prop="path"
    label="路径"
    width="180">
  </el-table-column>
  <el-table-column
      label="层级">
      <!-- 自定义表格列 -->
      <template slot-scope="scope">
        {{ ['一级','二级','三级'][scope.row.level] }}
      </template>
  </el-table-column>
</el-table>
</template>

<script>
import { getRightsList } from '@/api/rights'

export default {
  name: 'rightsList',
  data () {
    return {
      rights: []
    }
  },

  created () {
    // getRightsList()
    this.loadRights()
  },

  methods: {
    async loadRights () {
      const { meta, data } = await getRightsList('list') // 发请求 拿结果
      if (meta.status === 200) {
        this.rights = data
      }
    }
  }
}
</script>

<style>

</style>
